<template>
  <SonDemo1></SonDemo1>


  <!-- 2、表单输入展示 - 测试使用 reactive 来管理多个表单字段的数据绑定和响应式展示。 -->
  <div class="form-container">
    <h2>Enter your information</h2>
    <label for="name">Name:</label>
    <input type="text" id="name" v-model="infor.name">

    <label for="age">Age:</label>
    <input type="number" id="age" v-model="infor.age">
    <p>Your name is {{ infor.name }} and you are {{ infor.age }} years old.</p>
  </div>
  <hr>

  <!-- 3.待办事项列表 - 测试使用 reactive 数组来处理列表项的添加与移除操作。-->
  <div class="todo-list">
    <h2>Todo List</h2>
    <input placeholder="Add a new todo" v-model="a1">
    <button @click="changeAdd">Add</button>
    <ul>
      <li v-for="(item, index) in a" @click="del(index)" :key="index"> {{ item }} </li>
    </ul>
  </div>
  <hr>

  <!-- 4.下面是一个购物车的静态 HTML 模板和样式部分。你可以在此基础上实现购物车的功能，包括 ref、reactive、计算属性、样式绑定等 Vue 3 知识点-->
  <div class="shopping-cart">
    <h1>Shopping Cart</h1>
    <!-- 商品列表 -->
    <div class="product-list">
      <div class="product">
        <img src="https://img0.baidu.com/it/u=285709826,1446459622&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=892"
          alt="Product Image">
        <div class="product-details">
          <h2>犬夜叉</h2>
          <p>$100.00</p>
          <div class="quantity">
            <button @click="delBut1" key="index">-</button>
            <input type="text" v-model="inputVal1">

            <button @click="addBut1">+</button>
          </div>
        </div>
      </div>
      <div class="product">
        <img src="https://img2.baidu.com/it/u=2786283323,2882696918&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1215"
          alt="Product Image">
        <div class="product-details">
          <h2>腹肌</h2>
          <p>$50.00</p>
          <div class="quantity">
            <button @click="delBut2">-</button>
            <input type="text" v-model="inputVal2">
            <button @click="addBut2">+</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 购物车总结 -->
    <div class="cart-summary">
      <h3>Cart Summary</h3>
      <p>Total Items: <span>{{ totalItems }}</span></p>
      <p>Total Price: <span>{{ totalPrice }}</span></p>
      <button class="checkout-btn">Checkout</button>
      <!-- <div v-if="showModal" class="modal">
        <div class="modal-content">
          <span class="close" @click="closeModal">&times</span>
          <div v-html="modalContent"></div>
          <button class="pay-btn" @click="openPaymentModal">付款</button>
        </div>
      </div> -->

    </div>
  </div>



</template>

<script setup lang="ts">
import { computed } from 'vue';
import { reactive, ref } from 'vue';
import SonDemo1 from './components/SonDemo1.vue'
import SonDemo2 from './components/SonDemo1.vue'
import SonDemo3 from './components/SonDemo1.vue'
import SonDemo4 from './components/SonDemo1.vue'


//2. 表单输入展示 - 测试使用 reactive 来管理多个表单字段的数据绑定和响应式展示
let infor = reactive({
  name: '小红',
  age: 29
})

// 3.待办事项列表 - 测试使用 reactive 数组来处理列表项的添加与移除操作。
const a = reactive(['Sample Todo 1', 'Sample Todo 2', 'Sample Todo 3'])
const a1 = ref('')

function changeAdd() {
  if (a1.value == '') {
    a.push(`Sample Todo ${a.length + 1}`)

  } else {
    a.push(a1.value)
  }

  a1.value = ''
}

function del(index: number) {
  a.splice(index, 1)
}

// 4.下面是一个购物车的静态 HTML 模板和样式部分。你可以在此基础上实现购物车的功能，包括 ref、reactive、计算属性、样式绑定等 Vue 3 知识点
const inputVal1 = ref(1)
// function delBut1() {
//   inputVal1.value -= 1
// }

const delBut1 = () => {
  if (inputVal1.value > 0) {
    inputVal1.value -= 1
  }
}

function addBut1() {
  inputVal1.value += 1
}

const inputVal2 = ref(0)
function delBut2() {
  if (inputVal2.value > 0) {
    inputVal2.value -= 1
  }

}
function addBut2() {
  inputVal2.value += 1
}

const totalPrice = computed(() => {
  return inputVal1.value * 100 + inputVal2.value * 50

})

const totalItems = computed(() => {
  return inputVal1.value + inputVal2.value
})

//  新增弹窗展示所购商品及总价 
function openPaymentModal() {
  
}

</script>

<style scoped>
/*  1.计数器 - 测试使用 ref 来处理单个数据的响应式更新  */
.counter {
  text-align: center;
}

.todo-list button {
  margin: 5px;
  padding: 10px;
  background-color: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
}

.todo-list button:hover {
  background-color: #45a049;
}

/* 2、表单输入展示 - 测试使用 reactive 来管理多个表单字段的数据绑定和响应式展示。 */
.form-container {
  margin: 20px;
}

input {
  display: block;
  margin: 10px 0;
  padding: 5px;
}

label {
  font-weight: bold;
}

p {
  margin-top: 20px;
  font-size: 1.2em;
}

/* 3、待办事项列表 - 测试使用 reactive 数组来处理列表项的添加与移除操作。 */
.todo-list {
  text-align: center;
}

input {
  padding: 5px;
  margin-right: 10px;
}

.todo-list button {
  padding: 5px;
  background-color: #2196f3;
  color: white;
  border: none;
  cursor: pointer;
}

.todo-list button:hover {
  background-color: #0b7dda;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  cursor: pointer;
  padding: 10px;
  margin: 5px 0;
  background-color: #f1f1f1;
}

li:hover {
  background-color: #ddd;
}

/* 4.主体购物车样式 */
.shopping-cart {
  width: 80%;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f9f9f9;
}

/* 商品列表 */
.product-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.product img {
  width: 100px;
  height: 150px;
  margin-right: 20px;
}

.product-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-details h2 {
  margin: 0;
}

.product-details p {
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
}

/* 数量调节按钮 */
.quantity {
  display: flex;
  align-items: center;
}

.quantity button {
  padding: 5px 10px;
  margin: 0 5px;
  background-color: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
}

.todo-list.quantity button:hover {
  background-color: #45a049;
}

.quantity input {
  width: 40px;
  text-align: center;
}

/* 购物车总结 */
.cart-summary {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid #ccc;
  text-align: right;
}

.cart-summary h3 {
  margin-bottom: 10px;
}

.cart-summary p {
  font-size: 1.2em;
  margin: 5px 0;
}

.checkout-btn {
  padding: 10px 20px;
  background-color: #2196f3;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1em;
}

.checkout-btn:hover {
  background-color: #0b7dda;
}
</style>
